<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%--get direction form overlay --%>

<div class="modal fade" id="getDirectionFormOverlay" tabindex="-1" role="dialog" aria-labelledby="getDirectionFormOverlayLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Get Direction.</h4>
        </div>
        <div class="modal-body">

				<form action="" name="ksr-get-direction-form" class="form" role="form">
				<div class="directions-travel-mode-switcher text-center border-bottom">
					<div class="inline-block travel-mode driving selected">
						<div class="map-icons-sprite icon">
							<span class="hide">DRIVING</span>
						</div>
					</div>
					<div class="inline-block travel-mode transit">
						<div class="map-icons-sprite icon">
							<span class="hide">TRANSIT</span>
						</div>
					</div>
					<div class="inline-block travel-mode walking">
						<div class="map-icons-sprite icon">
							<span class="hide">WALKING</span>
						</div>
					</div>
					<div class="inline-block travel-mode bicycling">
						<div class="map-icons-sprite icon">
							<span class="hide">BICYCLING</span>
						</div>
					</div>
				</div>        	
        		<input type="hidden" value="${office.address.addressLine1},${office.address.city}, ${office.address.state} ${office.address.zip}" name="address" />
	 		<div class="input-item font-16 full-width margin-vertical-half">
	 			<div class="full-width table-disp">
	 				<label for="from" class="label table-cell text-left"></label>
	  			<div class="table-cell">
				 <div class="inline-block margin-right">
				  <label>
				    <input type="radio" name="direction" id="direction-from" value="from" checked>
				    From
				  </label>
				</div>
				<div class="inline-block">
				  <label>
				    <input type="radio" name="direction" id="direction-to" value="to">
				    To
				  </label>
				</div>       		
	  			</div>
	 			</div>
	 		</div>
	 		<div class="input-item font-16 full-width margin-vertical-half">
	 			<div class="errContainer  errorMsg">
					<label for="from" class="error"></label>
				</div>	
	 			<div class="full-width table-disp">
	 				<label for="from" class="label table-cell text-left">From:</label>
	  			<div class="table-cell">
	  				<input type="text" value="" name="from" id="from" class="text-field required full-width font-16 form-control place-autocomplete" placeholder="start"/>
	  			</div>
	 			</div>
	 		</div>
	 		<div class="input-item font-16 full-width margin-vertical-half">
	 			<div class="errContainer  errorMsg">
				<label for="to" class="error"></label>
			</div>	
	 			<div class="full-width table-disp">
	 				<label for="to" class="label table-cell text-left">To:</label>
	  			<div class="table-cell">
	  				<input  type="text" value="${office.address.addressLine1},${office.address.city}, ${office.address.state} ${office.address.zip}" name="to" id="to" class=" place-autocomplete text-field required full-width font-16 form-control" placeholder="destination"/>
	  			</div>
	 			</div>
	 		</div>
	
			<div class="clearfix"></div>
	   		<div class="submit-button ${param.mode} margin-top text-center">
	    		<button type="submit" class="btn btn-primary">Submit</button>	
	    		<button type="reset" class="btn btn-default"><fmt:message key="msg.reset"/></button>	
	   		</div>	
	 		</form>
        </div><!-- /.modal-body -->
        <div class="modal-footer text-center">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  
  
<%--customer review form overlay --%>

<div class="modal fade" id="customerReviewOverlay" tabindex="-1" role="dialog" aria-labelledby="customerReviewOverlayLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Please submit your review.</h4>
        </div>
        	<div class="modal-body">
        		<jsp:include page="/WEB-INF/modules/customer-review-form.jsp">
					<jsp:param value="edit" name="mode"/>
					<jsp:param value="${param.redirect}" name="redirect"/>
        		</jsp:include>
        </div><!-- /.modal-body -->
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

<%--login form overlay --%>

<div class="modal fade" id="customerLoginSigninOverlay" tabindex="-1" role="dialog" aria-labelledby="customerLoginSigninOverlayLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title login-mode">Please login</h4>
          <h4 class="modal-title signin-mode ksr-hide">Create your account</h4>
        </div>
       	<div class="modal-body">
       		<div class="login-mode">
       		<div class="errContainer font-16 errorMsg margin-top-half ksr-hide">
				<label class="error login-error"></label>
			</div>
			  <jsp:include page="/WEB-INF/modules/login-form.jsp">
		  		<jsp:param name="mode" value="ajax" />
			  </jsp:include>
       		</div>
       		<div class="signin-mode ksr-hide">
				<jsp:include page="/WEB-INF/modules/registration-form.jsp">
		  		<jsp:param name="action" value="/ksr/signup.json" />
		  		<jsp:param name="mode" value="ajax create" />
		  	</jsp:include>
       		</div>
       	</div><!-- /.modal-body -->
        <div class="modal-footer text-left">
        	<div class="login-mode">
        		<h4 class="inline-block font-15 margin-right">No account yet?</h4>
         		 <button type="button" class="btn btn-success inline-block create-an-account">Create an Account</button>
        	</div>
        	<div class="signin-mode ksr-hide">
        		<h4 class="inline-block font-15 margin-right">Already have an account?</h4>
         		 <button type="button" class="btn btn-success inline-block log-in-now">Log in Now</button>
        	</div>
        </div>
			  		</form>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

